<%-- 
    Document   : Default4
    Created on : 2014/2/26, 下午 03:06:14
    Author     : Gjun
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grace gift</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqFancyTransitions.1.8.min.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
	
	$(".def-nav,.info-i").hover(function(){
		$(this).find(".pulldown-nav").addClass("hover");
		$(this).find(".pulldown").show();
	},function(){
		$(this).find(".pulldown").hide();
		$(this).find(".pulldown-nav").removeClass("hover");
	});
	
});
</script>


<script type="text/javascript">
    $(function () {
        $('#gallery').jqFancyTransitions({
            effect: 'zipper', // wave, zipper, curtain
            width: 850, // width of panel
            height: 600, // height of panel
            strips: 15, // number of strips
            delay: 3000, // delay between images in ms
            stripDelay: 20, // delay beetwen strips in ms
            titleOpacity: 0.8, // opacity of title
            titleSpeed: 2000, // speed of title appereance in ms
            position: 'curtain', // top, bottom, alternate, curtain
            direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
            navigation: true, // prev and next navigation buttons
            links: true // show images as links
            
        });
    })
</script>


<style type="text/css">
*{
    margin:0;
  padding:0;
}
body{
    font:14px "微软雅黑", arial, serif;
    color:#333;
}
a,a:link,a:visited{
    color:#039;
}
img{
    border:0;
}
.header_bg{
    width:100%;
    height:128px;
    /*background:url(images/header.jpg) no-repeat center top;*/
}
.header{
    margin:0 auto 0 auto;
    width:988px;height:128px;
    /*background:url(images/header_z.jpg) no-repeat center top;*/
}

.nav{
    position:relative;
    left:4px;
    top:100px;
    width:950px;
    height:30px;
    /*background:#333;*/
    /*border-top:1px solid #444;*/
    /*border-bottom:1px solid #444;*/
}
.nav .list{
    list-style-type:none;
    margin-left:0px;

}
.nav .list li{
    float:left;
    position:relative;
    height:35px;
    line-height:26px;

}
.nav .list li .game_hover{
    float:left;
    
    display:block;
    margin-top:5px;
    height:40px;
    width:115px;
    padding:0 0px 0 0px;/*列表中區格*/
    color:#ccc;
    /*font-weight:bold;*/
    text-decoration:none;
        text-align: center;/*++++置中++++*/

    border-top:1px solid #444;
    border-bottom:1px solid #444;
    border-right:1px solid #444;
    border-left:1px solid #444;
    }
.nav .list li .game_hover_current,
.nav .list li .game_hover:hover{
    background-color:#fff;
    color:#575757;
    margin-top:4px;
    padding:0 0px 0 0px;
    border:1px solid #666; /*這行會移來移去*/
    border-bottom:0;


}

.hover_cont{
    display:none;
    position:absolute;
    width:0px;/*auto*/
    height:auto; 
    top:35px;
    
    border:0px solid #666;/*3*/
    border-top:0;
    
    border-bottom-width:2px;
    
    background:#fff;
    z-index:1000;

}
.hover_cont .nav_cont{
    padding:0px;/*  移過去裡面的東西位置可調整*/
    padding-top:0px;/*增加空白在選項裡面的上方增加*/
    /*padding-bottom:0;*/

    /*border-top:1px solid #444;*/      /*++++++++*/
    border-bottom:1px solid #444;
    /*border-right:1px solid #444;
    border-left:1px solid #444;
    */
}
.hover_cont .nav_li{
    /*display:inline-block;*/
    width:100%;
    /*width:115px;*/
    height:100%;
    /*
    *height:auto;
    *margin-top:7px;
    */
    /*
    padding-bottom:5px;
    *padding-bottom:12px;
    */
    /*border-bottom:1px dashed #ccc;*/

    border-top:1px solid #444;
    border-bottom:1px solid #444;
    border-right:1px solid #444;
    border-left:1px solid #444;
}
.hover_cont .nav_li_l{
    float:left;
    width:150px;
    color:#f60;
    font-weight:bold;
}
.hover_cont .nav_li_r{
    /*float:left;*/
    /*width:100px;*//*++++*/
    color:#999;
    font-family:"宋体";
    font-size:10px;
    /*line-height:26px;*/


    border-top:1px solid #444;
    border-bottom:1px solid #444;
    border-right:1px solid #444;
    border-left:1px solid #444;

}
.hover_cont .nav_li_r a{
    padding:0 0px 0 0px;
    color:#666;
    font-size:12px;
    text-decoration:none;

}
.hover_cont .nav_li_r a:hover{
    color:#ff221b;

}
.hover_cont .nav_li_r a.orange{
    color:#f60;

}

.nav .list .wlyx{
    top:45px;/*增加移過去之後選項的高度往下移動*/
    width:116px;/*增加移過去之後選項的寬度往左增加*/
    left:0;

}
.nav .list .djdj{
    width:800px;
    left:0;

}
.nav .list .yy{
    width:740px;
    left:0;

}
.nav .list .dwsy{
    width:750px;
    left:0;

}
.nav .list .xsk{
    width:740px;
    left:0;

}
.nav .list .cgwr{
    width:610px;
    left:0;

}
.nav .list .xz{
    width:630px;
    right:0;

}
.nav .list .mt{
    width:580px;
    right:0;

}
.nav .list .kyx{
    width:610px;
    right:0;

}
.nav .list .wt{
    width:510px;
    right:0;

}
.nav .list .cy{
    width:540px;
    right:0;

}
.nav .list .wb{
    width:710px;
    right:0;

}
.nav .list .xyx{
    width:740px;
    right:0;

}
.nav .list .sp{
    width:730px;
    right:0;

}
.nav .list .sc{
    width:700px;
    right:0;

}

.content{
    margin:15px auto 0 auto;
    width:980px;
    height:500px;
    background:#ccc;

}
</style>

<script type="text/javascript">
    var $$ = function (id) {
        return document.getElementById(id);
    }

    var getByClass = function (oParent, sClass) {
        var aEle = oParent.getElementsByTagName("*");
        var re = new RegExp("\\b" + sClass + "\\b");
        var arr = [];

        for (var i = 0; i < aEle.length; i++) {
            if (re.test(aEle[i].className)) {
                arr.push(aEle[i]);
            }
        }
        return arr;
    }

    var setMainNav = function () {
        var oMainNav = $$("mainNav");
        var aLi = getByClass(oMainNav, "list")[0].getElementsByTagName("li");
        var aGameHover = getByClass(oMainNav, "game_hover");
        var aHoverCont = getByClass(oMainNav, "hover_cont");

        for (var i = 0; i < aGameHover.length; i++) {
            aGameHover[i].index = i;
            aGameHover[i].onmouseover = function () {
                this.className += " " + "game_hover_current";
                for (var j = 0; j < aHoverCont.length; j++) {
                    aHoverCont[j].index_j = j;
                    aHoverCont[j].style.display = "none";
                    aHoverCont[j].onmouseover = function () {
                        this.style.display = "block";
                        aGameHover[this.index_j].className += " " + "game_hover_current";
                    }

                    aHoverCont[j].onmouseout = function () {
                        this.style.display = "none";
                    }
                }
                if (aHoverCont[this.index]) {
                    aHoverCont[this.index].style.display = "block";
                }
            }
        }

        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseout = function () {
                if (aHoverCont[this.index]) {
                    aHoverCont[this.index].style.display = "none";
                }
                aGameHover[this.index].className = "game_hover";
            }
        }
    }

    window.onload = function () {
        setMainNav();
    }
</script>

</head>






<body>
<div class="hd-main clearfix" id="header">
	
	<a class="logo" href="Default4.jsp"></a>
	
	<div class="navs">
		<a class="def-nav" href="Default4.jsp">首頁</a>
		<span class="separate"></span>
		<div class="def-nav current has-pulldown-special">
			<a class="pulldown-nav" href=""><em class="f-icon"></em>辦公</a>
			<div class="pulldown app-url">
				<div class="content">
					<a class="li disk" href="">
						<span class="icon"></span>
						<span class="text">雲端</span>
					</a>
					<a class="li tongxunlu" href="">
						<span class="icon"></span>
						<span class="text">通訊錄</span>
					</a>
					<a class="li xiangce" href="">
						<span class="icon"></span>
						<span class="text">相簿</span>
					</a>
					<a class="li wenzhang" href="">
						<span class="icon"></span>
						<span class="text">文章</span>
					</a>
					<a class="li note" href="">
						<span class="icon"></span>
						<span class="text">筆記本</span>
					</a>
					<a class="li duanxin" href="">
						<span class="icon"></span>
						<span class="text">簡訊</span>
					</a>
					<a class="li zhaohui" href="">
						<span class="icon"></span>
						<span class="text">手機找回</span>
					</a>
					<a class="li youxi" href="">
						<span class="icon"></span>
						<span class="text">遊戲</span>
					</a>
					<a class="li jiankang" href="">
						<span class="icon"></span>
						<span class="text">健康</span>
					</a>
				</div>
			</div>
		</div>
		
		<span class="separate"></span>
		
		<a class="def-nav" href="">應用</a>
	</div>
	
	<div class="info">
		<ul>
			<li class="info-i user-name has-pulldown">
				<em class="f-icon pull-arrow"></em>
				<a class="f-icon identity" href="" title="未开通VIP"></a>
				<span class="name top-username">李四</span>
				<div class="pulldown user-info">
					<em class="arrow"></em>
					<div class="content">
						<span class="li"><a href="">個人資料</a></span>
						<span class="li"><a href="">購買容量</a></span>
						<span class="li"><a href="">免費服務</a></span>
						<span class="li"><a href="">會員中心</a></span>
						<span class="separate-li no-height"></span>
						<span class="li"><a href="javascript:;" id="signout">退出</a></span>
					</div>
				</div>
			</li>
			<li class="info-i default-text">
				<a class="notice" href="" id="notificationTrigger">通知</a>
				<em class="f-icon notice-nu" id="noticeNoParent">
					<b class="f-icon" id="noticeNo">0</b>
				</em>
			</li>
			<li class="info-i no-separate default-text has-pulldown">
				<em class="f-icon pull-arrow"></em>
				<span class="more" hideFocus="hideFocus">更多</span>
				<div class="pulldown more-info">
					<em class="arrow"></em>
					<div class="content">
						<span class="separate-li no-height"></span>
						<span class="li"><a href="">收藏工具</a></span>
						<span class="li"><a href="">歷史紀錄</a></span>
						<span class="li"><a href="">版本更新</a></span>
						<span class="li"><a href="">幫助中心</a></span>
						<span class="li"><a href="">問題反應</a></span>
						<span class="li"><a href="">服務協議</a></span>
						<span class="li"><a href="">版權聲明</a></span>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
</div>

    
    
    
    
    
    
<div class="header_bg">
	<div class="header">
		<div class="nav" id="mainNav">
			<ul class="list">
				<li>
					<a href="#" class="game_hover">New in</a>
					<div class="hover_cont wlyx">
						<div class="nav_cont">
							<div class="nav_li">
								<div class="nav_li_r">
									<a href="daocy.jsp">暢銷商品</a>
								</div>
                                <div class="nav_li_r">
									<a href="#">人氣現貨</a>
								</div>
                                <div class="nav_li_r">
									<a href="#">時尚名人嚴選</a>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<a href="#" class="game_hover">SHOES</a>
				</li>
                <li>
					<a href="#" class="game_hover">CLOTHING</a>
				</li>
                <li>
					<a href="#" class="game_hover">MEN</a>
				</li>
                <li>
					<a href="#" class="game_hover">KIDS</a>
				</li>
                <li>
					<a href="#" class="game_hover">LOOKBOOK</a>
				</li>
                <li>
					<a href="#" class="game_hover">SALE</a>
				</li>
                <li>
					<a href="#" class="game_hover">ACCESSORIES</a>
                </li>
		</div>
	</div>
</div>
	<div class="focus">
  <div id="gallery">
                <img width="850" height="600" src="images/pic1.jpg"  alt="歡迎參觀" /> 
		<img width="850" height="600" src="images/pic2.jpg" alt="" />
		<img width="850" height="600" src="images/pic3.jpg" alt="" />
		<img width="850" height="600" src="images/pic4.jpg" alt="" />
		<img width="850" height="600" src="images/pic5.jpg" alt="" />
		<img width="850" height="600" src="images/pic6.jpg" alt="" />
	</div>
</div>
</body>

</html>
